@import 'assets/scss_mixin/translate-center.scss';
@import 'assets/style/line-type.scss';

$ba-icon-color: #c1c1c1;
$ba-icon-hover-color: #999;
$content-border: 1px solid #fafafa;

.rte-content__line {
  all: initial;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  &-before,
  &-after {
    flex-shrink: 0;
    width: 10px;
    &:hover .rtei {
      display: inline-block;
    }
  }
  &-before {
    position: relative;
    &--insert {
      display: flex;
      line-height: 1;
      border-radius: 50%;
      position: absolute;
      &[insert='before'] {
        top: 0;
        left: 0;
        transform: translate(-20%, -20%);
      }
      &[insert='after'] {
        bottom: 0;
        left: 0;
        transform: translate(-20%, 20%);
      }
      .rtei {
        font-size: 10px;
        cursor: pointer;
        color: $ba-icon-color;
        display: none;
        &:hover {
          color: $ba-icon-hover-color;
        }
      }
    }
  }
  &-after {
    position: relative;
    .rtei {
      font-size: 10px;
      color: $ba-icon-color;
      cursor: pointer;
      display: none;
      @include translate-center(vertical);
      &:hover {
        color: $ba-icon-hover-color;
      }
    }
  }
  &-content {
    flex-grow: 1;
    display: flex;
    width: 100%;
    // background-color: green;
    border-left: $content-border;
    border-right: $content-border;
    &--marker {
      flex-shrink: 0;
    }
    &--editable {
      flex-grow: 1;
      cursor: text;
      &:focus {
        outline: none;
      }
    }
  }
}
